/**
 * @fileoverview GDrive gui for Coding in Chrome editor.
 *
 * @license Copyright 2015 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */

{namespace cwc.soy.GDrive autoescape="strict"}


/**
 * Google Drive template.
 */
{template .gDriveTemplate}
  {@param prefix: string}
  {@param type: string}

  <div id="{$prefix}body">
    <ul id="{$prefix}menu"></ul>
    <div id="{$prefix}content">
      <div id="{$prefix}file_parents"></div>
      <div id="{$prefix}file_list"></div>
      {if $type == 'save'}
        <div id="{$prefix}filename"></div>
      {/if}
    </div>
  </div>
{/template}


/**
 * Google Drive file name textbox.
 */
{template .gDriveFileName}
  {@param filename: string}
  {@param prefix: string}

  <form action="#">
    <div class="mdl-textfield mdl-js-textfield">
      <input id="{$prefix}save_filename" class="mdl-textfield__input" type="text" value="{$filename}">
      <label class="mdl-textfield__label" for="{$prefix}save_filename">
        {msg desc=""}Filename{/msg}
      </label>
    </div>
    <button id="{$prefix}save_file" 
            class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
      Save
    </button>
  </form>
{/template}


/**
 * Google Drive folder navigation.
 */
{template .gDriveParentFolders}
  {@param prefix: string}
  {@param parents: list<?>}

  {foreach $parent in $parents}
    <button class="mdl-button mdl-js-button {$prefix}parentfolder"
            data-gdrive-id="{$parent.id}" {if isLast($parent)}disabled{/if}>
      {$parent.name}</button>
    {if not isLast($parent)}&gt;{/if}
  {/foreach}
{/template}


/**
 * Google Drive file list.
 */
{template .gDriveFileList}
  {@param files: ?}

  <div>
    <table class="mdl-data-table mdl-js-data-table">
      <thead>
        <tr>
          <th class="mdl-data-table__cell--non-numeric"></th>
          <th class="mdl-data-table__cell--non-numeric">{msg desc=""}Title{/msg}</th>
          <th class="mdl-data-table__cell--non-numeric">{msg desc=""}Owner{/msg}</th>
          <th class="mdl-data-table__cell--non-numeric">{msg desc=""}Last change{/msg}</th>
        </tr>
      </thead>
      <tbody>
      {foreach $file in $files}
        <tr data-id="{$file['id']}" data-name="{$file['name']}" class="gdrive-loader">
          <td class="mdl-data-table__cell--non-numeric">
            <webview src="{$file['iconLink']}"></webview>
          </td>
          <td class="mdl-data-table__cell--non-numeric">{$file['name']}</td>
          <td class="mdl-data-table__cell--non-numeric">{$file['owners'][0]['displayName']}</td>
          <td class="mdl-data-table__cell--non-numeric">{$file['modifiedTime']}</td>
        </tr>
      {/foreach}
      </tbody>
    </table>
  </div>
{/template}


/**
 * Google Drive wait indicator.
 */
{template .gDriveWait}
  {@param prefix: string}

  <div id="{$prefix}wait">
    <div class="mdl-spinner mdl-js-spinner is-active"></div> Please wait loading ... 
  </div>
{/template}